<template>
  <div class="app-container">
    <div class="title-bar">
      <div class="window-title">Electron + Vite + Vue 应用</div>
      <div class="window-controls">
        <button class="control-button minimize" @click="minimizeWindow">-</button>
        <button class="control-button maximize" @click="maximizeWindow">□</button>
        <button class="control-button close" @click="closeWindow">×</button>
      </div>
    </div>
    <nav class="nav-menu">
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <main class="content">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

// 窗口控制函数
const minimizeWindow = () => {
  window.electron?.minimizeWindow();
};

const maximizeWindow = () => {
  window.electron?.maximizeWindow();
};

const closeWindow = () => {
  window.electron?.closeWindow();
};

// 如果在浏览器环境中预览，提供模拟函数
onMounted(() => {
  if (!window.electron) {
    window.electron = {
      minimizeWindow: () => console.log('最小化窗口'),
      maximizeWindow: () => console.log('最大化窗口'),
      closeWindow: () => console.log('关闭窗口')
    };
  }
});
</script>

<style>
.app-container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-menu {
  background-color: #34495e;
  padding: 1rem;
  display: flex;
  gap: 1rem;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-menu a:hover {
  background-color: #4a6b8a;
}

.nav-menu a.router-link-active {
  background-color: #1abc9c;
}

/* 自定义标题栏样式 */
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  color: white;
  padding: 0.5rem 1rem;
  -webkit-app-region: drag; /* 允许拖动窗口 */
}

.window-title {
  font-size: 0.9rem;
  font-weight: 500;
}

.window-controls {
  display: flex;
  -webkit-app-region: no-drag; /* 控制按钮不参与拖动 */
}

.control-button {
  background: transparent;
  border: none;
  color: white;
  font-size: 1rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.control-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.control-button.minimize:hover {
  background-color: #0097e6;
}

.control-button.maximize:hover {
  background-color: #00a8ff;
}

.control-button.close:hover {
  background-color: #e74c3c;
}

.content {
  flex: 1;
  padding: 2rem;
  overflow: auto;
}
</style>